<template>
  <el-card
      class="box-card"
      shadow="hover"
  >
    <div id="applyFormWrapper">
      <el-steps :active="active" :align-center="true" finish-status="success" process-status="success" style="">
        <el-step title="选择"></el-step>
        <el-step title="提交"></el-step>
      </el-steps>


      <el-form v-show="active==0" ref="form" :model="formData" label-width="100px" size="mini"
      >
        <el-form-item label="应用">
          <el-tag v-for="item in appList" :key="item.appName" :effect="formData.appName==item.appName?'light':'plain'"
                  :hit="true" style="margin-right: 10px;cursor:pointer"
                  @click="formData.appName=item.appName"
          >{{ item.appShowName }}
          </el-tag>
        </el-form-item>
        <el-form-item label="类型">
          <el-tag v-for="item in flowRuleList" :key="item.name" :effect="formData.flowName==item.name?'light':'plain'"
                  :hit="true"
                  style="margin-right: 10px;cursor:pointer" type="success"
                  @click="formData.flowName=item.name"
          >{{ item.showName }}
          </el-tag>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="active=active+1">下一步</el-button>
        </el-form-item>
      </el-form>
      <div v-show="active==1" style="text-align: center">
        <ApplyForm :formData="formData"/>
        <el-button size="mini" type="success" @click="active=active-1">上一步</el-button>
        <el-button size="mini" type="primary" @click="onSubmit">提交</el-button>
      </div>
    </div>
  </el-card>
</template>
<script>
import ApplyForm from "./components/ApplyForm";
import {flowRuleListApi, submitApplyApi} from "@/api/apply";
import {appListApi} from "@/api/manage";

export default {
  data() {
    return {
      active: 0,
      flowRuleList: [],
      appList: [],
      formData: {appName: null, flowName: null, applyFormData: {}},
    };
  },
  components: {ApplyForm},
  methods: {
    async onSubmit() {
      console.log(this.formData);
      let flowShowName = this.flowRuleList.filter(f => f.name == this.formData.flowName)[0].showName;
      this.formData.applyTitle = flowShowName + "-" + this.formData.appName;
      await submitApplyApi(this.formData);
      this.$message({
        message: `提交申请成功`,
        type: "success",
      });
      this.$router.push({name: "applyList"})
    },
  },
  async created() {
    this.flowRuleList = await flowRuleListApi();
    this.appList = await appListApi();
  }
};
</script>
<style scoped>
#applyFormWrapper {
  width: 800px;
  margin: 0 auto;
}

#applyFormWrapper .el-steps {
  margin: 20px;
}
</style>
